<template>
  <view class="" style="background: #1972e3; padding-bottom: 80px">
    <view class="pb-60 px-30" style="background: #1972e3">
      <image
        src="/static/icon_bar_back_white.png"
        style="width: 22px; height: 22px; margin-top: 20px"
        @click="backFn"
      ></image>

      <navigator
        :url="
          $store.state.token ? '/pages/setting/setting' : '/pages/common/login'
        "
        class="text-white d-flex align-items-center justify-content-between mt-30"
      >
        <view class="d-flex align-items-center">
          <image
            :src="retImageUrl"
            class="border-radius-50per"
            mode="aspectFill"
            style="width: 80rpx; height: 80rpx"
          ></image>
          <view class="ml-22">
            <text
              class="d-block font-size-36 font-weight-bold"
              style="color: #ffffff"
              >ID:1202{{ user.id }}</text
            >
            <text
              class="d-block font-size-22 mt-4"
              v-if="user.id"
              style="color: #ffffff"
              >{{
                user.id
                  ? $t("series0") + user.account_number
                  : $t("common.plsLogin")
              }}</text
            >
          </view>
        </view>

        <image
          src="/static/icon_arrow_right_white_16.png"
          style="width: 20px; height: 20px; margin-left: 5px"
        ></image>
      </navigator>

      <!-- 新增 充币--提币--推广-->
      <view
        style="
          width: 80%;
          height: 114px;
          margin-top: 10px;
          padding: 1px;
          display: flex;
          align-items: center;
          justify-content: left;
          border-bottom: 1px solid #7798b1;
        "
      >
        <view
          style="width: 85px; height: 70px; text-align: center"
          @click="$utils.jump('/pages/fund/select?url=receive')"
        >
          <img
            style="width: 48px; height: 48px; margin-bottom: 4px"
            src="../../static/image/icon/anic_01.png"
          />
          <view
            style="
              font-size: 12px;
              color: #ffffff;
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            "
            >{{ $t("home5") }}</view
          >
        </view>
        <view
          style="width: 85px; height: 70px; text-align: center"
          @click="$utils.jump('/pages/fund/withdraw')"
        >
          <img
            style="width: 48px; height: 48px; margin-bottom: 4px"
            src="../../static/image/icon/anic_02.png"
          />
          <view
            style="
              font-size: 12px;
              color: #ffffff;
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            "
            >{{ $t("home6") }}</view
          >
        </view>
        <view
          style="width: 85px; height: 70px; text-align: center"
          @click="$utils.jump('/pages/invite/invite')"
        >
          <img
            style="width: 48px; height: 48px; margin-bottom: 4px"
            src="../../static/image/icon/anic_05.png"
          />
          <view
            style="
              font-size: 12px;
              color: #ffffff;
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            "
            >{{ $t("home9") }}</view
          >
        </view>
      </view>
      <!-- seriesList -->
      <!-- 新增  实名认证、收款账户  等等一个长条系列  -->
      <view style="width: 280px; padding: 12px; background-color: #1972e3">
        <view
          v-for="(item, index) in seriesList"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
          "
          @click="clickSeriesListItem(item)"
        >
          <view
            style="display: flex; justify-content: left; align-items: center"
          >
            <img
              style="width: 22px; height: 24px; margin-right: 12px"
              :src="
                require(`../../static/image/icon/series_bro_${item.value}.png`)
              "
            />
            <span style="color: #ffffff; line-height: 26px; font-size: 16px">{{
              $t("series" + item.value)
            }}</span>
          </view>
          <image
            src="/static/icon_arrow_right_white_16.png"
            style="width: 22px; height: 26px; margin-top: 2px"
          ></image>
        </view>
      </view>
      <view></view>
      <view></view>

      <view
        v-if="false"
        class="fanli text-black mt-20"
        style="background: #000000; margin: 0; padding: 6px"
      >
        <view class="d-flex justify-content-between align-items-center">
          <text class="font-size-30" style="color: #ffffff; font-weight: 580">{{
            $t("leftmenu.shortcuts")
          }}</text>
          <text style="color: #ffffff"></text>
          <text
            class="iconfont text-black icon-gengduo1 font-size-32 text-white"
            style="color: #939393"
          ></text>
        </view>

        <view class="data" style="background: #000000; margin-top: 10px">
          <view
            class="w-33 text-center"
            @click="$utils.jump('/pages/invite/invite')"
          >
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_invite_friend.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-24 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.referral") }}</text
            >
          </view>

          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_operate_service.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-24 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.support") }}</text
            >
          </view>

          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-24 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>

          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-24 mt-4"
              style="color: #ffffff; text-align: center"
            >
            </text>
          </view>
        </view>
      </view>

      <view
        v-if="false"
        class="fanli text-black mt-10"
        style="background: #000000"
      >
        <view class="d-flex justify-content-between align-items-center">
          <text class="font-size-30" style="color: #ffffff; font-weight: 580">{{
            $t("leftmenu.trade")
          }}</text>
          <text style="color: #ffffff"></text>
          <text
            class="iconfont text-black icon-gengduo1 font-size-32 text-white"
            style="color: #939393"
          ></text>
        </view>

        <view class="data" style="background: #000000; margin-top: 10px">
          <view
            class="w-33 text-center"
            @click="$utils.jump('/pages/tx/flashexchange')"
          >
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_flash.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.convert") }}</text
            >
          </view>

          <view
            class="w-33 text-center"
            @click="$utils.jump('/pages/transaction/currency')"
          >
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_spot.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.spot") }}</text
            >
          </view>

          <view
            class="w-33 text-center"
            @click="$utils.jump('/pages/transaction/contract')"
          >
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_spot.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.usdtM") }}</text
            >
          </view>

          <view
            class="w-33 text-center"
            @click="$utils.jump('/pages/transaction/contract')"
          >
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_spot.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.coinM") }}</text
            >
          </view>
        </view>

        <view class="data" style="background: #000000; margin-top: 20px">
          <view
            class="w-33 text-center"
            @click="$utils.jump('/pages/transaction/options')"
          >
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_s.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.second_future") }}</text
            >
          </view>

          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_o.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.options") }}</text
            >
          </view>

          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/svg-simulate.1706855913596.svg"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.demo_trading") }}</text
            >
          </view>

          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>
        </view>
      </view>

      <view
        v-if="false"
        class="fanli text-black mt-10"
        style="background: #000000"
      >
        <view class="d-flex justify-content-between align-items-center">
          <text class="font-size-30" style="color: #ffffff; font-weight: 580">{{
            $t("leftmenu.grow")
          }}</text>
          <text style="color: #ffffff"></text>
          <text
            class="iconfont text-black icon-gengduo1 font-size-32 text-white"
            style="color: #939393"
          ></text>
        </view>

        <view class="data" style="background: #000000; margin-top: 10px">
          <view
            class="w-33 text-center"
            @click="$utils.jump('/pages/financial/index', 'switchTab')"
          >
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_save_coin.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.earn") }}</text
            >
          </view>

          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>
        </view>
      </view>

      <view
        v-if="false"
        class="fanli text-black mt-10"
        style="background: #000000"
      >
        <view class="d-flex justify-content-between align-items-center">
          <text class="font-size-30" style="color: #ffffff; font-weight: 580">{{
            $t("leftmenu.rewards_perks")
          }}</text>
          <text style="color: #ffffff"></text>
          <text
            class="iconfont text-black icon-gengduo1 font-size-32 text-white"
            style="color: #939393"
          ></text>
        </view>

        <view class="data" style="background: #000000; margin-top: 10px">
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_part_plan.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.affiliate") }}</text
            >
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_invite_friend.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.referral") }}</text
            >
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_reward.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.rewards_center") }}</text
            >
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>
        </view>
      </view>

      <view
        v-if="false"
        class="fanli text-black mt-10"
        style="background: #000000"
      >
        <view class="d-flex justify-content-between align-items-center">
          <text class="font-size-30" style="color: #ffffff; font-weight: 580">{{
            $t("leftmenu.community_Governance")
          }}</text>
          <text style="color: #ffffff"></text>
          <text
            class="iconfont text-black icon-gengduo1 font-size-32 text-white"
            style="color: #939393"
          ></text>
        </view>

        <view class="data" style="background: #000000; margin-top: 10px">
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_dao.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >MyOkex DAO</text
            >
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%"> </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
            ></text>
          </view>
        </view>
      </view>

      <view
        v-if="false"
        class="fanli text-black mt-10"
        style="background: #000000"
      >
        <view class="d-flex justify-content-between align-items-center">
          <text class="font-size-30" style="color: #ffffff; font-weight: 580">{{
            $t("leftmenu.help")
          }}</text>
          <text style="color: #ffffff"></text>
          <text
            class="iconfont text-black icon-gengduo1 font-size-32 text-white"
            style="color: #939393"
          ></text>
        </view>

        <view class="data" style="background: #000000; margin-top: 10px">
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_novice_community.png"
                style="width: 22px; height: 26px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center; margin-top: -2px"
              >{{ $t("leftmenu.learn") }}</text
            >
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_association.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-22 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.community") }}</text
            >
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_operate_service.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-24 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.support") }}</text
            >
          </view>
          <view class="w-33 text-center">
            <view class="d-block" style="color: #ffffff; width: 100%">
              <image
                src="/static/bib/icon_my_home_notice.png"
                style="width: 24px; height: 24px; text-align: center"
              ></image>
            </view>
            <text
              class="d-block font-size-24 mt-4"
              style="color: #ffffff; text-align: center"
              >{{ $t("leftmenu.announcements") }}</text
            >
          </view>
        </view>
      </view>

      <view
        v-if="false"
        style="display: flex; margin-top: 40px"
        @click="$utils.jump('/pages/aboutmain')"
      >
        <view style="flex: 1"></view>
        <view style="display: flex">
          <image
            data-v-e21dcd32=""
            src="/static/icon-uzxlogo.1706855913596.svg"
            alt="UZX"
            style="width: 20px; height: 20px"
          ></image>
          <span data-v-e21dcd32="">About UZX</span>
          <view>
            <image
              src="/static/icon_arrow_right_white_16.png"
              style="
                width: 16px;
                height: 16px;
                margin-top: 2px;
                justify-content: center;
                vertical-align: center;
              "
            ></image>
          </view>
        </view>
        <view style="flex: 1"></view>
      </view>

      <u-popup
        v-model="showLanguage"
        mode="bottom"
        length="60%"
        :title="$t('setting.selectLang')"
      >
        <view class="popup-list">
          <view
            class="popup-list-item"
            v-for="item in langs"
            :key="item.value"
            :class="{ active: item.selected }"
            @click="setLang(item)"
          >
            <text style="color: #ffffff">{{ item.name }}</text>
          </view>
        </view>
      </u-popup>

      <u-popup
        v-model="showDefaultCurrency"
        mode="bottom"
        length="80%"
        :title="$t('setting.selectCoinType')"
      >
        <view class="popup-list">
          <view
            class="popup-list-item"
            v-for="(item, index) in $store.state.fiats"
            :key="item.currency_code"
            :class="{
              active: item.currency_code == $store.state.fiat.currency_code,
            }"
            @click="saveFiat(index)"
          >
            <text class="pl-18 pr-14 font-size-32" style="color: #000">{{
              item.currency_code
            }}</text>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { langs } from "./data.js";
import myNavbar from "../../uview-ui/components/u-navbar/my-navbar.vue";
import UImage from "../../uview-ui/components/u-image/u-image.vue";
export default {
  data() {
    return {
      seriesList: [
        { name: "实名认证", value: 1 },
        { name: "收款账户", value: 2 },
        { name: "安全中心", value: 3 },
        { name: "系统公告", value: 4 },
        { name: "邀请好友", value: 5 },
        // { name: "下载APP", value: 6 },
        { name: "退出登录", value: 7 },
        { name: "切换语言", value: 8 },
      ],
      //retImageUrl:require('static/image/icon/man.png'),
      retImageUrl: require("static/bib/user.png"),
      user: {},
      langs: null,
      lang: null,
      fiats: null,
      //显示修改默认法币
      showDefaultCurrency: false,
      //显示修改默认语言
      showLanguage: false,
    };
  },
  components: {
    UImage,
    myNavbar,
  },
  onShow() {
    this.setDefaultLang();
    this.getUserInfo();

    let token = uni.getStorageSync("token");
    if (token && token.length > 10) {
      this.$https.initDataToken(
        {
          url: "setOnline",
          type: "POST",
        },
        (res, msg) => {
          console.log("设置在线" + JSON.stringify(res));
        }
      );
    }
  },
  methods: {
    clickSeriesListItem(item) {
      console.log("点了吗");

      if (item.value == 1) {
        uni.navigateTo({ url: "/pages/setting/real_mark" });
      }
      if (item.value == 2) {
        uni.navigateTo({ url: "/pages/setting/wallet" });
      }
      if (item.value == 3) {
        uni.navigateTo({ url: "/pages/setting/security" });
      }
      if (item.value == 4) {
        uni.navigateTo({ url: "/pages/common/msg" });
      }
      if (item.value == 5) {
        uni.navigateTo({ url: "/pages/invite/invite" });
      }
      // if (item.value == 6) {
      //   uni.navigateTo({ url: "/pages/invite/invite" });
      // }
      if (item.value == 7) {
        this.logout();
      }
      if (item.value == 8) {
        this.showLanguage = true;
      }
    },
    logout() {
      this.$store.commit("logout");
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    invite() {
      if (this.$store.state.user) {
        uni.navigateTo({ url: "/pages/invite/invite" });
      }
    },
    backFn() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    setDefaultLang() {
      let langsData = langs.map((el) => {
        el.selected = false;
        return el;
      });
      const lang = uni.getStorageSync("lang") || "en";
      const has = langsData.findIndex((item) => item.value == lang);
      this.lang = langsData[has];

      langsData[has].selected = true;
      this.langs = langsData;
    },
    //保存法币
    saveFiat(index) {
      const fiat = this.$store.state.fiats[index];
      this.$store.commit("saveFiat", fiat);
      this.showDefaultCurrency = false;
    },
    navFunc(item) {
      const { openType, url } = item;
      if (openType === "url") {
        uni.navigateTo({
          url,
        });
      } else if (openType === "popup") {
        this[url] = true;
      }
    },
    setLang(item) {
      let langs = this.langs.map((el) => {
        el.selected = false;
        if (el.value === item.value) el.selected = true;
        return el;
      });
      this.langs = langs;
      this._i18n.locale = item.value;
      this.lang = item;
      uni.setStorageSync("lang", item.value);
      this.$store.commit("setLang", item.value);
      setTimeout(() => {
        this.showLanguage = false;
      }, 200);
    },
    //获取个人信息
    getUserInfo() {
      this.$https.initDataToken(
        {
          url: "user/info",
          type: "GET",
        },
        (res, msg) => {
          this.user = res;
          this.$store.commit("refreshUser", res);
        }
      );
    },
    //退出登陆
    async logout() {
      const ret = await this.$utils.showModal(
        this.$t("common.hint"),
        this.$t("setting.confirmLogout")
      );
      if (!ret) return;
      const lang = uni.getStorageSync("lang") || "en";

      this.$https.initDataToken(
        {
          url: "user/logout?lang=" + lang,
          type: "GET",
        },
        (res, msg) => {
          console.log("退出===>" + JSON.stringify(res));
          if (lang === "vi") {
            this.$utils.showToast("Thoát thành công");
          } else if (lang === "en") {
            this.$utils.showToast("Exit successful");
          } else if (lang === "th") {
            this.$utils.showToast("ออกจากความสำเร็จ");
          } else if (lang === "id") {
            this.$utils.showToast("Keluar berhasil");
          } else if (lang === "zh") {
            this.$utils.showToast("退出登录成功");
          } else {
            this.$utils.showToast(res);
          }

          this.$store.commit("deleteUser");
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/common/login",
            });
          }, 1200);
        }
      );
    },
  },
  computed: {
    i18n() {
      return this.$t("setting");
    },
    navs() {
      const _i18n = this._i18n;
      const message = _i18n.messages[_i18n.locale].setting;
      return [
        // {
        // 	name:message.bill,
        // 	value:'Bill',
        // 	image:require('static/image/icon/setting-icon-1.png'),
        // 	show:true,
        // 	openType:'url',
        // 	url:'/pages/setting/bill',
        // },
        {
          name: message.wallet,
          value: "Receiving Account",
          image: require("static/image/icon/setting-icon-2.png"),
          show: true,
          openType: "url",
          url: "/pages/setting/wallet",
        },
        {
          name: message.banks,
          value: "Banks",
          image: require("static/image/icon/buycoin1.png"),
          show: true,
          openType: "url",
          url: "/pages/setting/bank",
        },
        // {
        // 	name:message.banksInternational,
        // 	value:'Banks - International',
        // 	image:require('static/image/icon/setting-icon-13.png'),
        // 	show:true,
        // 	openType:'url',
        // 	url:'/pages/setting/bank_international',
        // },
        {
          name: message.securitySettings,
          value: "Security settings",
          image: require("static/image/icon/setting-icon-3.png"),
          show: true,
          openType: "url",
          url: "/pages/setting/security",
        },
        // {
        // 	name:message.coupon,
        // 	value:'Coupon',
        // 	image:require('static/image/icon/setting-icon-4.png'),
        // 	show:true,
        // 	openType:'url',
        // 	url:'/pages/setting/coupon',
        // },
        // {
        // 	name:message.systemNotification,
        // 	value:'System notification',
        // 	image:require('static/image/icon/setting-icon-5.png'),
        // 	show:false,
        // 	openType:'url',
        // 	url:'',
        // },
        // {
        // 	name:message.defaultFiatCurrency,
        // 	value:'Default fiat currency',
        // 	image:require('static/image/icon/setting-icon-6.png'),
        // 	show:true,
        // 	openType:'popup',
        // 	url:'showDefaultCurrency',
        // },
        {
          name: message.language,
          value: "Language",
          image: require("static/image/white/lang.png"),
          show: true,
          openType: "popup",
          url: "showLanguage",
        },
        // {
        // 	name:message.faq,
        // 	value:'FAQ',
        // 	image:require('static/image/icon/help0608.png'),
        // 	show:true,
        // 	openType:'url',
        // 	url:'/pages/common/faq',
        // },
        // {
        // 	name:message.operationalCompliance,
        // 	value:'Operational Compliance',
        // 	image:require('static/image/icon/setting-icon-9.png'),
        // 	show:true,
        // 	openType:'url',
        // 	url:'/pages/setting/operational_compliance',
        // },
        // {
        // 	name:message.share,
        // 	value:'Share',
        // 	image:require('static/image/icon/setting-icon-10.png'),
        // 	show:false,
        // 	openType:'url',
        // 	url:'/pages/setting/share',
        // },
        // {
        // 	name:message.contactUs,
        // 	value:'Contact us',
        // 	image:require('static/image/icon/setting-icon-11.png'),
        // 	show:true,
        // 	openType:'url',
        // 	url:'/pages/common/contactus',
        // },
        {
          name: message.aboutUs,
          value: "About us",
          image: require("static/image/icon/setting-icon-12.png"),
          show: true,
          openType: "url",
          url: "/pages/common/aboutus",
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #1972e3;
}
.fanli {
  padding-left: 4rpx;
  padding-right: 44rpx;
  padding-top: 16px;
  padding-bottom: 0;
  overflow: hidden;
  .haoyou {
    font-size: 30rpx;
    padding: 8rpx 30rpx;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(to right, #ff174d, #724685);
    border-radius: 20rpx;
  }
  .data {
    margin: 0 6rpx;
    margin-top: 0rpx;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0;
    display: flex;
    justify-content: space-between;
  }
}

.setting-nav {
  .item {
    margin-bottom: 12rpx;
    padding: 26rpx 32rpx;
    border-radius: 12rpx;
    box-shadow: 0px 0px 8.9px 1.1px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    .image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 17rpx;
    }
  }
}

// 弹出层列表
.popup-list {
  .popup-list-item {
    height: 96rpx;
    line-height: 96rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    position: relative;
    display: flex;
    align-items: center;
    &:before {
      content: "";
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 0;
      height: 2rpx;
      background-color: #242424;
    }
    &.active {
      background-color: #242424;
      &:after {
        content: "";
        width: 36rpx;
        height: 20rpx;
        background-image: url("../../static/image/icon/setting-icon-20.png");
        background-size: cover;
        position: absolute;
        right: 80rpx;
        top: 50%;
        margin-top: -10rpx;
      }
    }
  }
}

.button-base {
  background-image: linear-gradient(to right, #dd1d46, #f9577a);
  color: #fff;
}
.connect_btn {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(10%, #1fa2ff),
    color-stop(55.21%, #12d8fa),
    to(#a6ffcb)
  );
  background: -webkit-linear-gradient(
    left,
    #1fa2ff 10%,
    #12d8fa 55.21%,
    #a6ffcb 100%
  );
  background: -o-linear-gradient(
    left,
    #1fa2ff 10%,
    #12d8fa 55.21%,
    #a6ffcb 100%
  );
  background: linear-gradient(90deg, #1fa2ff 10%, #12d8fa 55.21%, #a6ffcb 100%);

  //-webkit-background-clip: text;
  //-webkit-text-fill-color: transparent;
  //background-clip: text;
  //text-fill-color: transparent;
  //text-align: center;
}
</style>
